<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Cities</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" media="all">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--导入头部-->
<div id="head" th:include="common/header"></div>
<div class="container" style="width: 1350px;margin-left: auto;margin-right: auto">
    <a href="/index/view">
        <button type="button" class="layui-btn layui-bg-blue layui-btn-sm layui-btn-primary">
            首页
        </button>
    </a>

    <!--在thymeleaf中使用th:each遍历列表-->
    <div class="City" style="width: 800px;margin-top: 10px;position:relative">
        <span th:each="cities:${cities}">
            <!--获取相应的城市数据，点击进入相应的页面，这里通过实现index控制器中的toCityDeatil方法进入的，同时参数也传递进入的-->
            <a th:href="@{/index/toCityDeatil(cityname=${cities.getCityname()})}">
                <div class="layui-border" style="margin-bottom: 40px;padding: 20px;position: relative">
                    <img th:src="${cities.getPicture()}">
                    <p th:text="${cities.getCityname()}" style="margin-right: 580px;float: right;font-size: 25px;color: black">城市名</p>
                    <div style="font-size: 15px;margin-top: 10px;color: black">推荐景点：
                        <span style="font-size: 12px" th:text="${cities.getSspotname()}">景点名</span>
                    </div>
                </div>
            </a>

        </span>
    </div>

    <!--添加上下页按钮-->
    <div id="pageturn" style="margin-left: 60%">
        <span th:if="${pageNum > 1}">
            <a class="prev" th:href="@{/index/city(pageNum=${pageNum}-1)}">
                <button type="button" class="layui-btn">
                    上一页
                </button>
            </a>
        </span>
        <span th:if="${pageNum < (count/12)}">
            <a class="next" th:href="@{/index/city(pageNum=${pageNum}+1)}">
                <button type="button" class="layui-btn">
                    下一页
                </button>
            </a>
        </span>
    </div>


</div>



<br>
<br>
<br>
<br>
<br>
<br>
<div id="foot" th:include="common/footer"></div>
</body>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script>

</script>
</html>